<template>
    <div id="storeDetails">
        <!--后退-->
        <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">详情</mt-tab-item>
            <mt-tab-item id="2">评论</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div style="overflow:scroll;height:20rem;">
                     <!--第1种选择类型-->
                    <div class="textOne" v-for="(item,index) in editShopInfo.explainJson.textSetOne">
                        <p class="chanel"><img @click="delTextOne(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        <div style="display:flex;">
                            <section>
                            <textarea v-model="item.inputBox1" maxlength="360">{{item.inputBox1}}</textarea>
                            </section>
                            <section>
                                    <p><textarea v-model="item.inputBox2" maxlength="60">{{item.inputBox2}}</textarea></p>
                                    <p><textarea v-model="item.inputBox3" maxlength="60">{{item.inputBox3}}</textarea></p>
                            </section>
                        </div>
                    </div>

                    <div class="pictureOne" v-for="(item,index) in editShopInfo.explainJson.imageOne" >
                        <p class="chanel"><img @click="delImageOne(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        <div style="display:flex;">
                            <section @click="imgClick(index)">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://haixia.yaowk.xin/file"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessOne">
                                    <img v-if="item.common1" :src="item.common1" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </section>
                            <section>
                                    <p @click="imgClick(index)">
                                        <el-upload
                                            class="avatar-uploader"
                                            action="http://haixia.yaowk.xin/file"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccessTwo">
                                            <img v-if="item.common2" :src="item.common2" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </p>
                                    <p @click="imgClick(index)">
                                        <el-upload
                                            class="avatar-uploader"
                                            action="http://haixia.yaowk.xin/file"
                                            :show-file-list="false"
                                            :objectBind="index"
                                            :on-success="handleAvatarSuccessThree">
                                            <img v-if="item.common3" :src="item.common3" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </p>
                            </section>
                        </div>
                    </div>

                     <!--第2种选择类型-->
                    <div class="textTwo"  v-for="(item,index) in editShopInfo.explainJson.textSetTwo">
                        <p class="chanel"><img @click="delTextTwo(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        <div style="display:flex;">
                            <p><textarea v-model="item.inputBox1" maxlength="288">{{item.inputBox1}}</textarea></p>
                            <p><textarea v-model="item.inputBox2" maxlength="236">{{item.inputBox2}}</textarea></p>
                        </div>
                    </div>
                    <div class="pictureTwo" v-for="(item,index) in editShopInfo.explainJson.imageTwo">
                        <p class="chanel"><img @click="delImageTwo(index)"src="../../../assets/me/myMessageNo.png" alt=""></p>
                        <div style="display:flex;">
                            <p @click="imgClick(index)">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://haixia.yaowk.xin/file"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessFour">
                                    <img v-if="item.common1" :src="item.common1" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </p>
                            <p @click="imgClick(index)">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://haixia.yaowk.xin/file"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessFive">
                                    <img v-if="item.common2" :src="item.common2" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </p>
                        </div>
                    </div>
                    <!--第三种选择类型-->
                    <div class="textThree"  v-for="(item,index) in editShopInfo.explainJson.textSetThree">
                        <p class="chanel"><img @click="delTextThree(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        <p><textarea v-model="item.inputBox1" maxlength="250">{{item.inputBox1}}</textarea></p>
                    </div>
                    <div class="pictureThree" v-for="(item,index) in editShopInfo.explainJson.imageThree">
                        <p class="chanel"><img  @click="delImageThree(index)" src="../../../assets/me/myMessageNo.png" alt=""></p>
                        <p @click="imgClick(index)">
                            <el-upload
                                class="avatar-uploader"
                                action="http://haixia.yaowk.xin/file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccessSix">
                                <img v-if="item.common1" :src="item.common1" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </p>
                    </div>
                    
                </div>
                <div class="addSave">
                    <p class="add">
                        <img  @click="addDetails"src="../../../assets/me/add.png" alt="">
                    </p>
                    <p class="save" @click="save">保存</p>
                </div>
                
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
            </mt-tab-container-item>
        </mt-tab-container>
        <!--第一次弹出框-->
        <div id="genreWindow" v-show="genreWindow">  
        </div> 
        <div id="genreLayer" v-show="genreLayer">  
            <p><img  @click="closeDiv" src="../../../assets/task/chanelB.png" alt=""></p>
            <p><img src="../../../assets/task/rubbit.png" alt=""></p>
            <p>请选择排版类型噢</p>
            <section>
                <p @click="textSet()">文字</p>
                <p @click="pictureSet()">图片</p>
            </section>
        </div>  
        <!--文字排版弹出框-->
        <div id="typesetWindow" v-show="typesetWindow">  
        </div> 
        <div id="typesetLayer" v-show="typesetLayer">  
            <p style="text-align:right"><img  @click="close" src="../../../assets/task/chanelB.png" alt=""></p>
            <p>选择文字排版</p>
            <div>
                <section class="one" @click="wordSetOne">
                    <p>
                        <span></span>
                    </p>
                    <p>
                        <span></span>
                        <span></span>
                    </p>
                </section>
                <section class="two" @click="wordSetTwo">
                    <span></span>
                    <span></span>
                </section>
                <section class="three" @click="wordSetThree">
                </section>
            </div>
        </div>
        <!--图片排版弹出框-->
        <div id="pictureWindow" v-show="pictureWindow">  
        </div> 
        <div id="pictureLayer" v-show="pictureLayer">  
            <p style="text-align:right"><img  @click="closeSet" src="../../../assets/task/chanelB.png" alt=""></p>
            <p>选择图片排版</p>
            <div>
                <section class="one" @click="imageSetOne">
                    <p>
                        <span></span>
                    </p>
                    <p>
                        <span></span>
                        <span></span>
                    </p>
                </section> 
                <section class="two" @click="imageSetTwo">
                    <span></span>
                    <span></span>
                </section>
                <section class="three" @click="imageSetThree">
                </section>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
        selected:'1',
        imgIndex:'',
        genreWindow:false,
        genreLayer:false,
        typesetWindow:false,
        typesetLayer:false,
        pictureWindow:false,
        pictureLayer:false,
        editShopInfo:{
            explainJson:{
                textSetOne:[],
                textSetTwo:[],
                textSetThree:[],
                imageOne:[],
                imageTwo:[],
                imageThree:[],
            },
            inventory: undefined,
            new: true,
            serverExplain: undefined,
            serverName: undefined,
            serverStatus: undefined,
            serverType: '',
            shopId: '',
            specModels: [
                {
                    id: '',
                    new: true,
                    serverId: '',
                    specName: undefined,
                    specPrice: '',
                    type:undefined,
                    welfareId: ''
                }

            ],
            topExplainJson: {
                common1:undefined,
                common2:undefined,
                common3:undefined,
                input1:undefined,
                input2:undefined,
                input3:undefined,
            }
        },
        serverDel:{},
    }
  },
  created(){
        this.getParams();
  },
  mounted(){
  },
  methods:{
    getParams() {
        this.editShopInfo=this.$route.query.data;
        console.log('this.editShopInfo.explainJson')
        console.log(this.editShopInfo.explainJson)
    },  
    save(){
        this.editShopInfo.topExplainJson=JSON.stringify(this.editShopInfo.topExplainJson)
        this.editShopInfo.explainJson=JSON.stringify(this.editShopInfo.explainJson)
        
        this.$api.alterShop(this.editShopInfo).then((res)=>{
            if(res.code=='000000'){

            }
        })
    },
    delTextOne(index){
          this.editShopInfo.explainJson.textSetOne.splice(index,1)
    },
    delTextTwo(index){
          this.editShopInfo.explainJson.textSetTwo.splice(index,1)
    },
    delTextThree(index){
          this.editShopInfo.explainJson.textSetThree.splice(index,1)
    },
    delImageOne(index){
          this.editShopInfo.explainJson.imageOne.splice(index,1)
    },
    delImageTwo(index){
          this.editShopInfo.explainJson.imageTwo.splice(index,1)
    },
    delImageThree(index){
          this.editShopInfo.explainJson.imageThree.splice(index,1)
    },
    addDetails(){
        this.genreWindow=true;
        this.genreLayer=true;
    },
    closeDiv(){
        this.genreWindow=false;
        this.genreLayer=false;
    },
    textSet(){
        this.genreWindow=false;
        this.genreLayer=false;
        this.typesetWindow=true;
        this.typesetLayer=true;
        this.pictureWindow=false;
        this.pictureLayer=false;
    },
    close(){
        this.typesetWindow=false;
        this.typesetLayer=false;
    },
    pictureSet(){
        this.genreWindow=false;
        this.genreLayer=false;
        this.typesetWindow=false;
        this.typesetLayer=false;
        this.pictureWindow=true;
        this.pictureLayer=true;     
    },
    closeSet(){
        this.pictureWindow=false;
        this.pictureLayer=false;
    },
    wordSetOne(){
        var obj = {}
        obj.inputBox1 = undefined,
        obj.inputBox2 = undefined,
        obj.inputBox3 = undefined,
        this.editShopInfo.explainJson.textSetOne.push(obj)
        this.typesetWindow=false;
        this.typesetLayer=false;
    },
    wordSetTwo(){
        var obj = {}
        obj.inputBox1 = undefined,
        obj.inputBox2 = undefined,
        this.editShopInfo.explainJson.textSetTwo.push(obj)
        this.typesetWindow=false;
        this.typesetLayer=false; 
    },
    wordSetThree(){
        var obj = {}
        obj.inputBox1 = undefined,
        this.editShopInfo.explainJson.textSetThree.push(obj)
        this.typesetWindow=false;
        this.typesetLayer=false; 
    },
    imgClick(index){
        this.imgIndex=index;
    },
    imageSetOne(){
        var obj = {}
        obj.common1 = undefined,
        obj.common2 = undefined,
        obj.common3 = undefined,
        this.editShopInfo.explainJson.imageOne.push(obj)
        this.pictureWindow=false;
        this.pictureLayer=false;
    },
    imageSetTwo(){
        var obj = {}
        obj.common1 = undefined,
        obj.common2 = undefined,
        this.editShopInfo.explainJson.imageTwo.push(obj)
        this.pictureWindow=false;
        this.pictureLayer=false;
    },
    imageSetThree(){
        var obj = {}
        obj.common1 = undefined,
        this.editShopInfo.explainJson.imageThree.push(obj)
        this.pictureWindow=false;
        this.pictureLayer=false;
    },
    handleAvatarSuccessOne(res,file) {
        this.editShopInfo.explainJson.imageOne[this.imgIndex].common1 = res.data.file; 
    },
    handleAvatarSuccessTwo(res,file) {
       this.editShopInfo.explainJson.imageOne[this.imgIndex].common2 = res.data.file;
    },
    handleAvatarSuccessThree(res,file) {
        this.editShopInfo.explainJson.imageOne[this.imgIndex].common3 = res.data.file;
    },
    handleAvatarSuccessFour(res, file) {
        this.editShopInfo.explainJson.imageTwo[this.imgIndex].common1 = res.data.file;
    },
    handleAvatarSuccessFive(res, file) {
        this.editShopInfo.explainJson.imageTwo[this.imgIndex].common2 = res.data.file;
    },
    handleAvatarSuccessSix(res, file) {
        this.editShopInfo.explainJson.imageThree[this.imgIndex].common1 = res.data.file;
    },
  }
}
</script>
<style>
#storeDetails{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/bgA.png);
}
#storeDetails .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 1rem 0rem 1rem;
}
#storeDetails .mint-navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    width:93%;
    margin:1rem auto 0.5rem;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;
}
#storeDetails .mint-navbar .mint-tab-item {
    background:none;
    padding: 0 0;
    
}
#storeDetails .mint-tab-item {
    background:none;
    display: block;
    padding: 0 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-decoration: none;
}
#storeDetails .mint-tab-item-label {
    color: inherit;
    font-size: 1rem;
    height:3rem;
    line-height:3rem;
    
}
#storeDetails .mint-tab-container{
    height:30rem;
    overflow:scroll;
}
#storeDetails .mint-tab-item:nth-child(1) .mint-tab-item-label::before{
    content:url(../../../assets/task/undel.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#storeDetails .mint-tab-item:nth-child(2) .mint-tab-item-label::before{
    content:url(../../../assets/task/uncomment.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#storeDetails .mint-tab-item:nth-child(1).is-selected .mint-tab-item-label::before{
    content:url(../../../assets/task/del.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#storeDetails .mint-tab-item:nth-child(2).is-selected .mint-tab-item-label::before{
    content:url(../../../assets/task/comment.png);
    position: relative;
    top:0.2rem;
    right:0.25rem;
}
#storeDetails .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0px solid #26a2ff; 
    color: #2ba092;
    margin-bottom: -0.15rem;
}

#storeDetails .chanel{
    text-align:right;
}
#storeDetails .chanel >img{
    position:relative;
    top:-0.25rem;
    left:0.75rem;
    height:1rem;
}
#storeDetails .textOne{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#storeDetails .textOne section:nth-child(1){
    height:13rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .textOne section:nth-child(1) > textarea{
    height:100%;
    width:100%;
}
#storeDetails .textOne section:nth-child(2) p:nth-child(1){
    height:6.5rem;
    width:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #c4e1c6;
}

#storeDetails .textOne section:nth-child(2) p:nth-child(1) > textarea{
    height:100%;
    width:100%;
}
#storeDetails .textOne section:nth-child(2) p:nth-child(2){
    height:6.5rem;
    width:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #69b373;
}
#storeDetails .textOne section:nth-child(2) p:nth-child(2) > textarea{
    height:100%;
    width:100%;
}

#storeDetails .pictureOne{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#storeDetails .pictureOne section:nth-child(1){
    height:13rem;
    width:70%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .pictureOne section:nth-child(2) p:nth-child(1){
    height:6.5rem;
    width:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #c4e1c6;
}
#storeDetails .pictureOne section:nth-child(2) p:nth-child(2){
    height:6.5rem;
    width:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #69b373;
}
#storeDetails .textTwo{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#storeDetails .textTwo > div P:nth-child(1){
    height:13rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .textTwo  > div P:nth-child(1) > textarea{
    height:100%;
    width:100%;
}
#storeDetails .textTwo > div P:nth-child(2){
    height:13rem;
    width:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .textTwo > div P:nth-child(2) > textarea{
    height:100%;
    width:100%;
}
#storeDetails .pictureTwo{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#storeDetails .pictureTwo > div P:nth-child(1){
    height:13rem;
    width:70%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .pictureTwo > div P:nth-child(2){
    height:13rem;
    width:6.5rem;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .textThree{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#storeDetails .textThree P:nth-child(2){
    height:13rem;
    width:100%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .textThree P:nth-child(2) > textarea{
    height:100%;
    width:100%;
}
#storeDetails .pictureThree{
    margin:0.75rem auto;
    width:93%;
    border-radius:7px;
    background:#fff;
    box-shadow:0.05rem 0.05rem 0.5rem 0.05rem #e2e2e2;
    padding:0px 0.5rem 0.5rem 0.5rem;
}
#storeDetails .pictureThree P:nth-child(2){
    height:13rem;
    width:100%;
    border-radius:7px;
    padding:0.75rem;
    font-size:1.5rem;
    border:7px solid #29a193;
}
#storeDetails .addSave{
    position:fixed;
    width:100%;
}

#storeDetails .addSave .add{
    height:7.5rem;
    text-align:center;
    line-height:7.5rem;
    width:93%;
    margin:0 auto;
    background:#c4e1c6;
    border-radius:13px;
}
#storeDetails .addSave .add > img{
    height:2rem;
    width:2rem;
}
#storeDetails .save{
    height:3rem;
    line-height:3rem;
    width:35%;
    margin:1rem auto;
    text-align:center;
    background:#fff;
    color:#29a193;
    font-size:1rem;
    letter-spacing: 0.15rem; 
    border-radius:0.5rem;
    box-shadow:0.05rem 0.05rem 0.5rem 0.1rem #e2e2e2;
}
#storeDetails .avatar-uploader{
    width:100%;
    height:100%;
}
#storeDetails  .avatar-uploader .el-upload{
     width:100%;
    height:100%;
}
#storeDetails .avatar-uploader-icon{
    width:100%!important;
    height:100%!important;
    line-height: 10vh!important;
}
#storeDetails  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
#storeDetails .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
#storeDetails .avatar-uploader-icon {
    font-size: 1.4rem;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height:100%;
    text-align: center;
  }
#storeDetails .avatar {
    width: 100%;
    height: 100%;
    line-height: 100%;
    display: block;
  }

#storeDetails #genreWindow,#typesetWindow,#pictureWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#storeDetails #genreLayer{   
    width: 80%;
    height: 30%;
    background:#ffffff;  
    left: 10%;  
    top: 20%;
    color:#000;  
    z-index: 2; 
    padding:0.5rem;
    border-radius:0.8rem; 
    position: absolute;  
}
#storeDetails #genreLayer > p:nth-child(1){
    text-align:right;
}
#storeDetails #genreLayer > p:nth-child(2){
    text-align:center
}
#storeDetails #genreLayer > p:nth-child(2) > img{
    height:5rem;
}
#storeDetails #genreLayer > p:nth-child(3){
    text-align:center;
    font-size:0.8rem;
    color:#c0c0c0;
}
#storeDetails #genreLayer > section{
    margin-top:1rem;
    display:flex;
    width:80%;
    margin:1rem auto;
    justify-content: space-between;
}
#storeDetails #genreLayer > section > p{
    width:40%;
    background:#29a193;
    text-align:center;
    height:2.5rem;
    line-height:2.5rem;
    border-radius:0.8rem;
    color:#fff;
}
#storeDetails #typesetLayer{   
    width: 80%;
    height: 40%;
    background:#ffffff;  
    left: 10%;  
    top: 25%;
    color:#000;  
    z-index: 2; 
    padding:0.5rem;
    border-radius:0.8rem; 
    position: absolute;  
}
#storeDetails #typesetLayer > p:nth-child(2){
    margin:0.5rem 1rem;
    font-size:1rem;
}
#storeDetails #typesetLayer > div{
    width:80%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#storeDetails #typesetLayer > div .one{
    height:4rem;
    width:40%;
    margin-top:1rem;
    display:flex;
    justify-content: space-between;
}
#storeDetails #typesetLayer > div .one > p:nth-child(1){
    height:4rem;
    background:#29a193;
    width:60%;
}
#storeDetails #typesetLayer > div .one > p:nth-child(2){
    height:4rem;
    display:flex;
    flex-direction:column;
    width:35%;
}
#storeDetails #typesetLayer > div .one > p:nth-child(2) > span:nth-child(1){
    display:block;
    height:45%;
    flex:1;
    margin-bottom:5%;
    background:#29a193;
}
#storeDetails #typesetLayer > div .one > p:nth-child(2) > span:nth-child(2){
    display:block;
    height:45%;
    flex:1;
    margin-top:5%;
    background:#29a193;
}
#storeDetails #typesetLayer > div .two{
    height:4rem;
    width:40%;
    margin-top:1rem;
    display:flex;
    justify-content: space-between;
}
#storeDetails #typesetLayer > div .two > span:nth-child(1){
    height:4rem;
    width:60%;
    background:#29a193;
}
#storeDetails #typesetLayer > div .two > span:nth-child(2){
    height:4rem;
    width:35%;
    background:#29a193;
}
#storeDetails #typesetLayer > div .three{
    height:4rem;
    width:40%;
    margin-top:1.5rem;
    margin-left:30%;
    background:#29a193;
}
#storeDetails #pictureLayer{   
    width: 80%;
    height: 40%;
    background:#ffffff;  
    left: 10%;  
    top: 25%;
    color:#000;  
    z-index: 2; 
    padding:0.5rem;
    border-radius:0.8rem; 
    position: absolute;  
}
#storeDetails #pictureLayer > p:nth-child(2){
    margin:0.5rem 1rem;
    font-size:1rem;
}
#storeDetails #pictureLayer > div{
    width:80%;
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#storeDetails #pictureLayer > div .one{
    height:4rem;
    width:40%;
    margin-top:1rem;
    display:flex;
    justify-content: space-between;
}
#storeDetails #pictureLayer > div .one > p:nth-child(1){
    height:4rem;
    background:#29a193;
    width:60%;
}
#storeDetails #pictureLayer > div .one > p:nth-child(2){
    height:4rem;
    display:flex;
    flex-direction:column;
    width:35%;
}
#storeDetails #pictureLayer > div .one > p:nth-child(2) > span:nth-child(1){
    display:block;
    height:45%;
    flex:1;
    margin-bottom:5%;
    background:#29a193;
}
#storeDetails #pictureLayer > div .one > p:nth-child(2) > span:nth-child(2){
    display:block;
    height:45%;
    flex:1;
    margin-top:5%;
    background:#29a193;
}
#storeDetails #pictureLayer > div .two{
    height:4rem;
    width:40%;
    margin-top:1rem;
    display:flex;
    justify-content: space-between;
}
#storeDetails #pictureLayer > div .two > span:nth-child(1){
    height:4rem;
    width:60%;
    background:#29a193;
}
#storeDetails #pictureLayer > div .two > span:nth-child(2){
    height:4rem;
    width:35%;
    background:#29a193;
}
#storeDetails #pictureLayer > div .three{
    height:4rem;
    width:40%;
    margin-top:1.5rem;
    margin-left:30%;
    background:#29a193;
}
</style>